import React, { useEffect } from "react";
import echarts from "echarts/lib/echarts";
import "echarts/lib/component/title";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/visualMap";
import "echarts/lib/chart/pie";
const JPie = () => {
  function initChart() {
    var myChart = echarts.init(document.getElementById("j_pie"));
    // 绘制图表
    myChart.setOption({
      backgroundColor: "#2c343c",
      title: {
        text: "Customized Pie",
        left: "center",
        top: 20,
        textStyle: {
          color: "#ccc"
        }
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      visualMap: {
        show: false,
        min: 80,
        max: 600,
        inRange: {
          colorLightness: [0, 1]
        }
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: [50, 105],
          center: ["50%", "50%"],
          hoverAnimation: true,
          hoverOffset: 10,
          emphasis: {
            itemStyle: {
              shadowColor: "rgba(255, 255, 255,1)",
              shadowBlur: 100,
              shadowOffsetX: 0,
              shadowOffsetY: 0
            }
          },
          data: [
            { value: 335, name: "直接访问" },
            { value: 310, name: "邮件营销" },
            { value: 274, name: "联盟广告" },
            { value: 235, name: "视频广告" },
            { value: 400, name: "搜索引擎" }
          ].sort(function(a, b) {
            return a.value - b.value;
          }),
          roseType: "radius",
          label: {
            normal: {
              textStyle: {
                color: "rgba(255, 255, 255, 0.3)"
              }
            }
          },
          labelLine: {
            normal: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.3)"
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            }
          },
          itemStyle: {
            normal: {
              color: "#c23531",
              shadowBlur: 200,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          },
          animationType: "scale",
          animationEasing: "elasticOut",
          animationDelay: function(idx) {
            return Math.random() * 200;
          }
        }
      ]
    });

    // window.onresize = myChart.resize;
    window.addEventListener("resize", function() {
      myChart.resize();
    });
  }
  useEffect(() => {
    initChart();
  }, []);
  return <div id="j_pie" style={{ width: "100%", height: 300 }}></div>;
};

export default JPie;
